/*:root是一个伪类，表示文档根元素，相当于声明全局属性，优先级高*/
:root { 
  --primary-color: #31c27c;
}
/*对主体部分整体修饰*/
body {    
   margin: 0;      /*外边距设置为0 */
  background: #f5f5f5;    /*背景颜色设置为白色*/
  font-family: Microsoft Yahei; /*字体类型设置为雅黑*/
  font-size: 14px;    /*字体大小*/
   min-width: 1000px; 
}
a {  
  text-decoration: none;  /*超链接字体装饰*/
  color: #000; /*超链接颜色为黑色*/
}
/*header部分*/
header {    
  height: 90px;     
  background: white;  
  display: flex;    /*flex意为弹性布局，选择flex容器，达到居中的目的*/
  align-items: center;  /*使用flex布局时，设置flex子项在每个flex行交叉轴上默认对齐方式*/
}
/*main部分*/
/*小标题部分*/
.header-inner, main {   /*class选择器，匹配header-inner */
   width: 1200px; 
  padding: 20px;  /*内边距20px*/
  margin: auto;   /*水平居中*/
}
/*导航行部分*/
.tag-list { 
  margin-top: 50px;   
  margin-bottom: 15px; /*微调，对外边距上下设置50px和15px*/
}
/*各个小块状元素部分*/
.tag-item {
  display: inline-block;  /*定义为内联盒子，高宽固定，盒子不会换行*/
  padding: 0 8px; /*上下无间距，左右间距8px*/
  margin-right: 24px; 
  line-height: 26px;  
  color: #000;
  text-decoration: none;
}
/*内地的盒子外内容填充*/
.tag-active {
  background: var(--primary-color); /*var()函数可以代替元素任何属性中的值的任何部分，此处--primary-color已定义，正常读取*/
  color: white; /*继承，所以采用最高级白色*/
}
/*其余盒子外内容填充*/
.tag-item:not(.tag-active):hover {    /*将tag-active属性排除在外（不让tag-active属性继承） hover为鼠标悬停*/
  color: var(--primary-color);
}
/*主题图片部分*/
.nowrap { 
  white-space: nowrap;  /*段落文本不会换行，直到遇到标签为止*/
  overflow: hidden; /*溢出隐藏 清除浮动 解决外边距塌陷等 详情可见CSDN星星之火M的文章*/
  /*此处解决溢出隐藏*/
  text-overflow: ellipsis; 
  /*当文本溢出显示省略标记，为实现文本溢出是否显示省略，要满足强制文本在一行，以及溢出内容隐藏，才能实现显示省略号*/ 
  /*在尝试过之后发现无法显示省略号可能是这些原因 
  1.包裹文字容器一定需要确定的宽度，设置百分比宽度导致 text-overflow: ellipsis; 不生效 
  2.包裹文字必须同时设置white-space：nowrap；和overflow：hidden；两个属性
  3.没有超过宽度*/
  /*在a标签中text-overflow：ellipsis；不会生成省略号。要配合overflow：hidden；具体查一下*/
}  
/*主体的一个个盒子的定义*/
.playlist {
  display: grid;  /*Grid网格布局*/
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  /*划分列，repeat（）接受两个函数，第一个是参数重复次数，第二个是要重复的值*/
  /*auto fill 或 auto-fit 无法确定列数 minmax（）产生一个长度范围，表示长度在这范围中*/
  gap: 45px 15px;/*gap针对column和row间间隔，分别针对上下和左右*/
  margin-bottom: 45px;
}
.cover-wrap {
  display: flex;
  position:relative;/*绝对定位会根据父级来定位原始位置，会呈现出一团乱的情况*/
  overflow: hidden; /*清除浮动*/
  width: 100%;
  margin-bottom: 15px;
  align-items: center;/*flex容器子项居中  */
  justify-content: center;/*水平布局居中*/
  cursor: pointer;  /*光标覆盖时变为手型*/ 
}
.cover-img {
  width: 100%;/*完全填充*/
  transition: all 0.75s;  /*全部完成过渡需要0.75s*/
}
/* 父类位置为标准确定绝对位置，对于父类居中，黑色背景，隐藏mask仅占据位置,仅在鼠标滑过时提供一层透明黑色背景用 */
.cover-mask {
  position: absolute; /*这个并非绝对，也可以采用relative */
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;  /*通过这四个属性对box位置进行调整*/
  background: #000;
  opacity: 0;
  transition: all 0.5s;
}
.cover-play {
  position: absolute;/*这里利用absolute让图片在变化时呈现更美观，relative会导致图片变化留下一片空白影响观感*/
  left: 50%;
  top: 50%;
  margin-left: -35px;
  margin-top: -35px;
  opacity: 0;
  transform: scale(0.7);/*变形 设计大小为原图的0.7倍在滑过时渐变为1*/
  transition: all 0.5s;
}
.cover-wrap:hover .cover-mask {
  opacity: 0.2;  /*不透明度0.2*/
}/*划过背景变暗*/
.cover-wrap:hover .cover-play {
  opacity: 1;/*完全不透明*/
  transform: scale(1);
}
.cover-wrap:hover .cover-img {
  transform: scale(1.07);
}
.album-title:hover {
  color: var(--primary-color); /*已定义--primary-color，正常使用*/
}
.album-author {
  color: #999;
  line-height: 1.6;
}
.album-author:hover {
  color: var(--primary-color);/*已定义--primary-color，正常使用*/
}
.album-time {
  color: #999;
}
/*底部选择页面部分*/
.page {
  display: flex;  /*定义flex网格布局*/
  align-items: center; /*交叉点中点对齐*/
  justify-content: center; /*排列当前行中间*/
}
.page-item {
  display: inline-block;  /*定义为内联盒子，宽高固定，数字同行*/
  color: #a2a2a2;
  line-height: 50px;
  padding: 0 20px;
  margin: 10px;
  font-size: 16px;
}
.page-current, .page-item:not(.page-more):hover {
  background: var(--primary-color); /*已定义--primary-color，正常使用*/
  color: white;
}
/*底部灰色部分*/
footer {  /*页面底部*/
  margin-top: 60px; /*微调*/
  background: #333;
  height: 200px;
}/*不让底部看起来过于空荡*/